<template>
  <div id="IndexView">
    <div id="navBar">
      <ul class="head-nav nav nav-tabs">
        <li id="projectName"><a href="#"">包头交警分析决策分支持系统</a></li>
          <li class="active"><a href="#" @click="changeChosedModule('traffic_index')">首页</a></li>
        <li><a href="#" @click="changeChosedModule('traffic_condition')">运行态势分析</a></li>
        <li><a href="#" @click="changeChosedModule('traffic_analy')">交通安全态势分析</a></li>
        <li><a href="#" @click="changeChosedModule('traffic_exponent')">指数分析预警</a></li>
        </li>
      </ul>
    </div>
    <div id="func-list">
      <index-map ref="index" v-show="moduleStatus.traffic_index"></index-map>
      <condition-map ref="condition" v-show="moduleStatus.traffic_condition"></condition-map>
      <analy-map ref="analy" v-show="moduleStatus.traffic_analy"></analy-map>
      <exponent-map ref="exponent" v-show="moduleStatus.traffic_exponent"></exponent-map>
    </div>
  </div>
</template>

<script>


  import * as globals from './global'
  import * as env from './global/env'
  import WeatherModule from './components/WeatherModule'
  import ConditionMap from './components/ConditionMap'
  import AnalyMap from './components/analyMap'
  import ExponentMap from './components/ExponentMap'
  import IndexMap from './components/IndexMap'

  import {mapGetters} from 'vuex'

  export default {
    name: 'IndexView',
    data(){
      return {
        moduleStatus: {
          traffic_condition:false,
          traffic_analy:false,
          traffic_exponent:false,
          traffic_index:true
        }
      }
    },

    components: {
      WeatherModule,
      ConditionMap,
      AnalyMap,
      ExponentMap,
        IndexMap

    },
    mounted(){
      $('ul li').click(function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
      })
    },
    methods: {
      changeChosedModule(module){

        var moduleName = `${module}`
        for(var key in this.moduleStatus){
          if(key == moduleName){
            this.moduleStatus[key] = true
          }else{
            this.moduleStatus[key] = false
          }
        }
        if(moduleName == 'traffic_analy'){
          this.$refs.analy.resizeMap();
          this.$refs.analy.initMap();
        }else if(moduleName == 'traffic_condition'){
          this.$refs.condition.resizeMap();

        }else if(moduleName == 'traffic_exponent'){
          this.$refs.exponent.resizeMap();
          this.$refs.exponent.selectInitYearLine();
          this.$refs.exponent.selectInitMonthLine();
          this.$refs.exponent.initExponentMap();
        }




      },
    },

    computed: {
      ...mapGetters({
        weatherMapVisible: "weatherMapVisible",
      }),
    },

    watch: {
//            weatherMapVisible: "displayReagionWeather"
    },


  }
</script>

<style scope>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  a {
    color: inherit;
  }

  #IndexView {
    width: 100%;
    height: 100%;
  }

  #func-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  #navBar {
    width: 100%;;
    top: 5px;
    height: 70px;
    flex: 1;
    background-color: #10286a;
  }

  .head-nav {
    font-size: 24px;
    font-family: 华文宋体;
    color: white;
    font-weight: 900;
    /*background-color: #b9cf6a;*/
  }

</style>
